<template>
  <div class="main">
    <img :src="$store.state.appBg" class="bg1" alt>
    <div class="title">校园新鲜事</div>
    <div class="sidebar">
      <scroll-container ref="scrollContainer">
        <multi-list
          @scrollTo="scrollTo"
          @scrollFoc="scrollFoc"
          @scrollBlur="scrollBlur"
          :groupDatas="groupData"
          :head="head"
        >
          <ul>
            <li
              :class="{active: groupData.focArr[0][index], active_hold: index === holdIndex}"
              v-for="(item,index) in groupData.dataArr[0].data"
              :key="index"
            >
              <!--<i v-if="item.moduleType === 0"></i>-->
              <div style="margin-left: 70px;font-size: 30px;">
                <VMarquee  align="left" scrool-width="490" font-size="30" :active="groupData.focArr[0][index]">{{item.name}}</VMarquee>
                <a :data-index="'tar_0_'+index"></a>
              </div>
            </li>
          </ul>
        </multi-list>
      </scroll-container>
    </div>
    <xxsintro :groupData="dataDt"></xxsintro>
  </div>
</template>
<script>
import scrollContainer from "@/components/base/scroll-container/scroll-container";
import multiList from "@/components/base/multi-list/multi-list";
import xxsintro from "@/components/xyfc/xyxxs-intro";
import imglist_w312 from "../ImgList_w312";

export default {
  name: "xyfc_xyxxs",
  components: {
    xxsintro,
    scrollContainer,
    multiList,
    imglist_w312
  },
  data() {
    return {
      groups: [0, 1, 2, 3],
      scrollY: 0,
      backObjName: "xyfc_xyxxs",
      hs: this.$store.state.hs,
      bridge: this.$store.state.bridge,
      index: this.$route.params.index,
      head: {
        right: "1-0"
      },
      groupData: {
        dataArr: [
          {
            maxLine: 1,
            dynamic: false,
            title: "",
            data: []
          }
        ],
        focArr: [[]]
      },
      dataDt: {},
      intervalTime: null,
      moveObj: null,
      holdIndex: 0
    };
  },
  methods: {
    scroll(pos) {
      this.scrollY = pos.y;
    },
    scrollTo(targetIndex) {
      this.$refs.scrollContainer.scrollTo(targetIndex);
    },
    setBackObj(backObj) {
      this.hs.cookie.set(this.backObjName, JSON.stringify(backObj));
    },
    scrollFoc(obj) {
      if (obj.group === 0) {
        this.holdIndex = -1   // 重置保持焦点
        this.hs.ajax.get(
          "http://" +
            this.$store.state.domain +
            "/SMSCH-STB/material/find?materialId=" +
            this.groupData.dataArr[0].data[obj.objindex].id +
            "&schoolId=" +
            this.$store.state.school.id,
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              this.bridge.closeVedio();
              // 视频
              if (data.body.moduleType === 0) {
                if (this.hs.direction === 3) return;
                let vedioUrl = "";
                let url =
                  "http://ips-4k.hzdtv.tv/dataquery/contentPlayUrl?folderCode=" +
                  data.body.more.folderCode +
                  "&contentId=" +
                  data.body.more.contentId +
                  "&contentType=" +
                  data.body.more.contentType +
                  "&playUrlType=rtsp";

                if (
                  this.$store.state.appBg !== this.$store.state.appBgInfo.xygg
                )
                  this.$store.commit(
                    "setAppBg",
                    this.$store.state.appBgInfo.xygg
                  );

                this.hs.ajax.get(
                  url,
                  _responseText => {
                    let res = eval("(" + _responseText + ")");
                    vedioUrl = res.playUrl;
                  },
                  0,
                  3000
                );

                // 设置bound 和 vedio 的参数
                this.$store.commit("setVideoInfo", {
                  offsetLeft: 790,
                  offsetTop: 200,
                  width: 994,
                  height: 558
                });
                this.bridge.countFlag = 0;
                this.bridge.movies = [vedioUrl];
                setTimeout(() => {
                  this.bridge.initPlay();
                }, 250);
              } else if (data.body.moduleType === 1) {
                if (
                  this.$store.state.appBg !==
                  this.$store.state.appBgInfo.default
                )
                  this.$store.commit(
                    "setAppBg",
                    this.$store.state.appBgInfo.default
                  );
              }
              this.dataDt = data.body;
            }
          },
          0,
          function(msg) {},
          3000
        );
      }
    },
    scrollBlur(obj) {
    },
    getList() {
      this.hs.ajax.get(
        "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/column/find?columnId=7",
        data => {
          data = JSON.parse(data);
          //console.log(data);
          if (data.head.code === 1) {
            let listSize = data.body.listSize;
            this.hs.ajax.get(
              "http://" +
                this.$store.state.domain +
                "/SMSCH-STB/material/list?columnId=7&schoolId=" +
                this.$store.state.school.id +
                "&pageNum=1&pageSize=0",
              data => {
                data = JSON.parse(data);
                //console.log(data);
                if (data.head.code === 1 && data.body.length > 0) {
                  this.groupData.dataArr[0].data = data.body;
                }
              },
              0,
              function(msg) {},
              3000
            );
          }
        },
        0,
        function(msg) {},
        3000
      );
    },
    columnClick(id) {
      // 埋点
      this.hs.ajax.get(
        "http://" + this.$store.state.domain + "/SMSCH-STB/column/click?columnId=" + id,
        data => {
        }, 0, function (msg) {
        }, 3000);
    }
  },
  created() {
    this.$store.commit("setAppBg", this.$store.state.appBgInfo.default);
    this.getList();
    this.columnClick(7)
  },
  mounted() {
    if (this.index != -1) {
      this.hs.initFocus("0-" + this.index);
    } else {
      this.hs.initFocus("0-0");
    }

    this.hs.addSelect(this.groups, (group, objid, objindex) => {
      if (group === 1) {
        console.log(
          this.groupData.dataArr[0].data[this.hs.areaLastFocus[0].objindex]
            .moduleType
        );
        if (
          this.groupData.dataArr[0].data[this.hs.areaLastFocus[0].objindex]
            .moduleType === 0
        ) {
          this.bridge.fullScreen();
        }
      }
    });

    this.hs.addBlurArea([0], (group, objid, objindex) => {
      this.holdIndex = objindex;
    });

    //  查看是否有记忆焦点
    if (this.hs.cookie.get(this.backObjName)) {
      let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
      let focArr = backObj.backFocArr;
      this.hs.cookie.delOne(this.backObjName);
      //console.log(JSON.stringify(focArr) + "**************");
      this.hs.initFocus(focArr[0], true);
    }
  }

};
</script>

<style scoped lang="less">
.main {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  display: flex;
  .title {
    position: absolute;
    top: 77px;
    right: 121px;
    font-size: 60px;
    color: #e8e8e8;
  }
  .bg1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    z-index: -1;
  }
  .sidebar {
    box-sizing: border-box;
    margin-left: 120px;
    margin-right: 43px;
    flex-shrink: 0;
    width: 606px;
    height: 1080px;
    background: #6ec6e8;
    padding-top: 50px;
    // overflow: hidden;
    .multi-container {
      ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        li {
          line-height: 84px;
          list-style: none;
          display: flex;
          height: 84px;
          box-sizing: border-box;
          margin-bottom: 20px;
          align-items: center;
          width: 100%;
          overflow: hidden;
          &:last-child {
            margin-bottom: 60px;
          }
          div {
            position: absolute;
            width: 90%;
            height: 84px;
            overflow: hidden;
          }
          a {
            position: absolute;
            top: 200px;
          }
          span {
            position: absolute;
            left: 0px;
            font-size: 30px;
            margin-left: 69px;
            margin-right: 27px;
            overflow: hidden;
            white-space: nowrap;
          }
          i {
            left: 24px;
            top: 35%;
            position: absolute;
            width: 30px;
            height: 30px;
            background: url("../../assets/images/xyfc/xyzb/play.png") center
              no-repeat;
          }
        }
        .active_hold {
          background: #09508a;
          box-shadow: inset 2px 3px 7px 0px rgba(0, 0, 0, 0.35);
          color: #fbff92;
        }
        .active {
          background: #0e60e9;
          border: 2px solid #ffffff;
          border-radius: 8px;
          color: #fff;
        }
      }
    }
  }
}
</style>
